<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通讯录</title>
    <link rel="stylesheet" href="<%=basePath%>templates/style/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=basePath%>templates/style/build/css/doc.css" media="all">
    <script src="<%=basePath%>templates/style/plugins/layui/layui.js"></script>
    <script src="<%=basePath%>templates/style/plugins/layui/jquery-3.3.1.min.js"></script>
</head>

<body>
<div class="kit-doc">
    <!--这里写页面的代码-->
    <div class="kit-doc-title">
        <fieldset>
            <legend><a name="blockquote">通讯录</a></legend>
        </fieldset>
    </div>
    <div>
        <div class="layui-form layui-form-pane">
            <button class="layui-btn" id="add" type="button">添加</button>
            <button class="layui-btn" id="import" type="button" style="margin-left:10px;">导入</button>
            <button class="layui-btn" id="export" type="button" style="margin-left:10px;">导出</button>
            <div class="layui-inline" style="float: right;">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input name="search" id="search" lay-verify="required" autocomplete="off" class="layui-input"
                               type="text">
                    </div>
                    <button class="layui-btn layui-btn-primary" onclick="search()">搜索</button>
                </div>
            </div>
        </div>

        <div style="clear:both;"></div>

        <table class="layui-hide" id="test" lay-filter="demo"></table>

        <script type="text/html" id="indexTpl">
            {{d.LAY_TABLE_INDEX+1}}
        </script>

        <script type="text/html" id="barDemo">
            <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
        </script>


        <script type="text/html" id="sbLogoUrl">
            <a href="http://p6nngxvb7.bkt.clouddn.com/{{ d.sbLogoUrl }}" target="_blank"><img
                    src="http://p6nngxvb7.bkt.clouddn.com/{{d.sbLogoUrl}}"></a>
        </script>
        <%--时间格式化插件--%>
        <script src="<%=basePath%>templates/style/benstyle/js/time.js"></script>
        <script type="text/html" id="createTime">
            {{ toDateString(d.createTime, 'yyyy-MM-dd') }}
        </script>
        <script type="text/html" id="pic">
            {{#  if(d.imgUrl != null){ }}
            <a href="<%=basePath%>{{ d.imgUrl }}" target="_blank"><img src="<%=basePath%>{{ d.imgUrl }}" style="height: 100%;"></a>
            {{#  } }}
            {{#  if(d.imgUrl == null){ }}
            暂无
            {{#  } }}
        </script>
        <script type="text/html" id="area">
            {{#  if(d.area == 1){ }}
            北京
            {{#  } }}
            {{#  if(d.area == 2){ }}
            上海
            {{#  } }}
        </script>
    </div>
    <!--这里写页面的代码-->
</div>

<script>
    // 添加
    layui.use(['upload', 'layer'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        //让层自适应iframe
        $('#add').on('click', function () {
            var index = layer.open({
                type: 2,
                content: '<%=basePath%>addressList/goAdd.do',
                area: ['400px', '450px'],
                maxmin: true,
                end: function () {
                    location.reload();
                }
            });
        });
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#import'
            , url: '<%=basePath%>addressList/import.do'
            , field: 'file'
            , accept:'file'
            , exts:'xls|xlsx'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result, data) {
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                if(res.code == 0){
                    layer.msg(res.msg, {icon: 1, time: 2000});
                    window.location.reload();
                }

            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        $('#export').on('click', function () {
            $.post("<%=basePath%>addressList/export.do", {}, function (data) {
                var result = eval('('+data+')');
                if (result.code == "200") {
                    window.open("<%=basePath%>uplodefiles/通讯录.xls");
                } else {
                    layer.msg(data.msg, {icon: 0, time: 2000});
                    layer.close(index);
                }
            });
        });
    });

    // 渲染数据
    layui.use('table', function () {
        var table = layui.table;
        var search = $('#search').val();
        table.render({
            elem: '#test'
            , url: '<%=basePath%>addressList/getAllJson.do'
            , where: {search: search}
            , method: 'post'
            , page: {layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']}
            , cols: [[
                {field: '', align: 'center', width: 70, title: '序号', toolbar: '#indexTpl'}
                , {field: 'name', title: '姓名'}
                , {field: 'group', title: '部门'}
                , {field: 'imgUrl', title: '图片', templet: '#pic'}
                , {field: 'loginId', title: '工号'}
                , {field: 'place', title: '分机号'}
                , {field: 'area', title: '所在地',templet:'#area'}
                , {field: 'createTime', title: '添加时间', templet: '#createTime'}
                // ,{field:'ahType',align:'center', width:80, toolbar: '#kaiguan', title: '开关'}
                , {field: '', align: 'center', width: 150, toolbar: '#barDemo', title: '操作'}
            ]]

        });

        //监听工具条
        //监控表单id=demo
        table.on('tool(demo)', function (obj) {
            //获取表单数据
            var data = obj.data;
            if (obj.event === 'edit') {
                // 编辑
                var index = layer.open({
                    type: 2,//代表iframe 弹出
                    content: '<%=basePath%>addressList/goUpdate.do?id=' + data.id,
                    area: ['400px', '450px'],
                    maxmin: true,
                    end: function () {
                        location.reload();
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('真的要删除么？', function (index) {
                    // 写删除方法
                    $.post("<%=basePath%>addressList/del.do", {"id": data.id}, function (data) {
                        var result = eval('('+data+')');
                        if (result.code == "200") {
                            layer.msg(data.msg, {icon: 1, time: 2000});
                            // 前端修改
                            layer.close(index);
                            window.location.reload();
                        } else {
                            layer.msg(data.msg, {icon: 0, time: 2000});
                            layer.close(index);
                        }
                    });
                });
            }
        });
    });

    function search() {
        var table = layui.table;
        var search = $('#search').val();
        var date = $('#date').val();
        var date2 = $('#date2').val();
        if (date > date2) {
            alert("起始时间必须小于结束时间");
            return false;
        }
        table.render({
            elem: '#test'
            , url: '<%=basePath%>addressList/getAllJson.do'
            , where: {search: search}
            , method: 'post'
            , page: {layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']}
            , cols: [[
                {field: '', align: 'center', width: 70, title: '序号', toolbar: '#indexTpl'}
                , {field: 'name', title: '姓名'}
                , {field: 'group', title: '部门'}
                , {field: 'imgUrl', title: '图片', templet: '#pic'}
                , {field: 'loginId', title: '工号'}
                , {field: 'place', title: '分机号'}
                , {field: 'createTime', title: '添加时间', templet: '#createTime'}
                // ,{field:'ahType',align:'center', width:80, toolbar: '#kaiguan', title: '开关'}
                , {field: '', align: 'center', width: 150, toolbar: '#barDemo', title: '操作'}
            ]]

        });
    }

</script>

</body>

</html>